<template>
  <div class="main-container">
    <div class="header">
      <div>
        <div class="myicon">
          <el-dropdown>
            <img
              style="width: 60px; height: 60px; border-radius: 50px"
              src="../assets/images/sw.gif"
              alt=""
            />
            <span>{{ uName }}，您好</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="exit">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="mytitle">医+系统</div>
          <img src="../assets/images/hospital.jpg" alt="" class="left-img" />
        </div>
        <div>
          <el-menu
            @select="handleSelect"
            mode="horizontal"
            background-color="rgb(122, 157, 255)"
            text-color="#fff"
            class="myMenu"
          >
            <el-submenu
              v-for="(item, index) in menuList"
              :key="index"
              :index="item.path"
            >
              <template slot="title">{{ item.name }}</template>
              <!-- {{item}} -->
              <el-menu-item
                v-for="(child, childIndex) in item.children"
                :key="childIndex"
                :index="child.path"
              >
                {{ child.mate.title }}
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import routerList from "../router/index.js";

export default {
  name: "manageMain",
  comName: "管理员界面",

  data() {
    return {
      menuList: [],
      uName: sessionStorage.getItem("uName"),
    };
  },
  methods: {
    exit() {
      sessionStorage.removeItem("Token");
      sessionStorage.removeItem("uId");
      this.$router.replace({
        path: "/home/home",
      });
    },
    handleSelect(value) {
      if (this.$route.path === value) {
        return;
      }

      this.$router.push({
        path: value,
      });
    },
  },
  mounted() {
    let routes = routerList.options.routes[0].children;

    // 系统管理
    let sysModuleList = routes.filter((item) => {
      // console.log(item)
      return item.path.includes("System");
    });

    // 系统管理员管理
    let adminModuleList = routes.filter((item) => {
      return item.path.includes("Administrator");
    });

    // 住院信息管理
    let inpModuleList = routes.filter((item) => {
      return item.path.includes("InpatinentHospital");
    });

    // 病史管理
    let medicalModuleList = routes.filter((item) => {
      return item.path.includes("MedicalHistory");
    });

    // 预约管理
    let reserveModuleList = routes.filter((item) => {
      return item.path.includes("Reserve");
    });

    this.menuList = [
      {
        path: "/system",
        name: "系统模块",
        children: sysModuleList,
      },
      {
        path: "/admin",
        name: "管理员模块",
        children: adminModuleList,
      },
      {
        path: "/inpatinent",
        name: "住院信息模块",
        children: inpModuleList,
      },
      {
        path: "/medical",
        name: "病史管理模块",
        children: medicalModuleList,
      },
      {
        path: "/reserve",
        name: "预约管理模块",
        children: reserveModuleList,
      },
    ];

    // console.log(this.menuList)
  },
};
</script>



<style lang="scss" scoped>
.main-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;

  .header {
    width: 100%;
    height: 100px;

    .myicon {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      align-items: center;
      padding: 0px 30px;
    }

    .myMenu {
      .el-submenu {
        .el-menu--horizontal > .el-submenu .el-submenu__title {
          font-size: 18px;
          font-weight: bolder;
          background: rgb(122, 157, 255);
        }
      }
    }

    .left-img {
      width: 150px;
      height: 90px;
    }
  }
}

.mytitle {
  line-height: 90px;
  font-size: 30px;
  color: rgb(113, 157, 223);
  font-weight: bolder;
}
</style>